<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>5-获取鼠标在盒子内的坐标</title>
		<style type="text/css">
			*{
				margin:0;
				padding:0;
			}
			.box{
				width:200px;
				height:200px;
				background:red;
				overflow:hidden;
				margin:30px 0 0 45px;
			}
			.son{
				width:6px;
				height:6px;
				background:#fff;
				border-radius:50%;
				margin:20px 0 0 10px;
			}
		</style>
	</head>
	<body>
		<div class="box"><div class="son"></div></div>
		<script type="text/javascript">
			//坐标(x,y)
			var box = document.querySelector('.box');
			box.addEventListener('mousemove',function(e){
				//e事件对象
				console.log(e);
				var x = e.pageX -box.offsetLeft;
				var y = e.pageY - box.offsetTop;
				console.log('X坐标::'+x);
				console.log('Y坐标::'+y);
			});
		</script>
	</body>
</html>
